<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            padding-left: 20px;
        }

        .title {
            line-height: 50px;
        }

        .list li {
            line-height: 45px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 class="title">多元素获取和设置</h3>
        <input type="text" class="inp">
        <ul class="list">
            <li value="1">01
                <div></div>
            </li>
            <li value="1">02</li>
            <li value="1">03</li>
            <li value="1">04</li>
            <li value="1">05</li>
        </ul>
    </div>
</body>
<script>
    // 原型对象
    function GetEle(selector) {
        this.eles = document.querySelectorAll(selector)
    }
    GetEle.prototype.html = function (con) {
        if (arguments.length >= 1) { // 如果有参数
            // for (var i = 0; i < this.eles.length; i++) {
            //     this.eles[i].innerHTML = con;
            // }
            this.each(function (eles) {
                eles.innerHTML = con;
            });
        } else {
            return this.eles[0].innerHTML;
        }
    }
    GetEle.prototype.text = function (con) {
        if (arguments.length >= 1) { // 如果有参数
            // for (var i = 0; i < this.eles.length; i++) {
            //     this.eles[i].textContent = con;
            // }
            this.each(function (eles) {
                eles.textContent = con;
            });
        } else {
            return this.eles[0].textContent;
        }
    }
    GetEle.prototype.val = function (con) {
        if (arguments.length >= 1) { // 如果有参数
            // for (var i = 0; i < this.eles.length; i++) {
            //     this.eles[i].value = con;
            // }
            this.each(function (eles) {
                eles.value = con;
            });
        } else {
            return this.eles[0].value;
        }
    }
    GetEle.prototype.hide = function () {
        this.each(function (eles) {
            eles.style.display = "none";
        });
    }
    GetEle.prototype.show = function () {
        this.each(function (eles) {
            eles.style.display = "block";
        });
    }

    // 遍历实例化对象中的集合  每次循环时执行传入的回调函数 (item,index)
    GetEle.prototype.each = function (fn) {
        for (var i = 0; i < this.eles.length; i++) {
            var item = this.eles[i];
            var index = i;
            fn(item, i);
            // 注意 jquery中 第一个参数是下标,第二个才会循环的当前元素
            // fn(index, item);
        }
    }

    // 对GetEle进行二次封装  => 快速创建实例化对象并返回
    function $(selector) {
        return new GetEle(selector)
    }

    $(".title").text("hahahaha");
    $(".inp").val("2121");


    // console.dir(GetEle);
    // var $li = new GetEle(".list li");
    // // console.log($li);
    // $li.text("333");
    // console.log($li.text());
    // $li.hide();
    // $li.show();


</script>

</html>